<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sleep Trouble Predictor</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Sleep Trouble Predictor</h1>

    <div id="train-model">
        <h2>Train Model</h2>
        <button id="train-button">Train Model</button>
        <p id="train-result"></p>
    </div>

    <div id="predict">
        <h2>Predict Sleep Trouble</h2>
        <form id="predict-form">
            <label for="age">Age:</label>
            <input type="number" id="age" name="Age" required><br>

            <label for="physical-health">Physical Health:</label>
            <input type="number" id="physical-health" name="Physical Health" required><br>

            <label for="mental-health">Mental Health:</label>
            <input type="number" id="mental-health" name="Mental Health" required><br>

            <label for="dental-health">Dental Health:</label>
            <input type="number" id="dental-health" name="Dental Health" required><br>

            <label for="employment">Employment:</label>
            <input type="number" id="employment" name="Employment" required><br>

            <label for="race">Race:</label>
            <input type="number" id="race" name="Race" required><br>

            <label for="gender">Gender:</label>
            <input type="number" id="gender" name="Gender" required><br>

            <button type="submit">Predict</button>
        </form>
        <p id="prediction-result"></p>
    </div>

    <div id="feature-importance">
        <h2>Feature Importance</h2>
        <button id="feature-importance-button">Show Feature Importance</button>
        <img id="feature-importance-plot" src="" alt="Feature Importance Plot">